<!DOCTYPE html>
<!-- saved from url=(0028)http://www.hasbei.com/login? -->
<html xmlns:th="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有贝口腔网-登录</title>
    <meta name="keywords" content="有贝口腔网,口腔网,口腔知识,口腔资讯,口腔问答,口腔诊所,口腔厂家,在线看牙">
    <meta name="description" content="有贝口腔网是一家专注互联网口腔服务网站，为用户提供腔知识,口腔资讯,口腔问答,口腔诊所,诊所入住,口腔厂家,厂家入住,在线看牙等综合服务口腔网站">
    <link rel="stylesheet" href="/yb_system_css/reset.css" th:href="@{/yb_system_css/reset.css}">
    <link rel="stylesheet" href="/yb_system_css/login.css" th:href="@{/yb_system_css/login.css}">
    
    <script type="text/javascript">
        var basePath ="/";
    </script>

    <script src="/yb_system_js/common.js" th:src="@{/yb_system_js/common.js}"></script>
    <script src="/yb_system_js/jquery-3.5.1.min.js" th:src="@{/yb_system_js/jquery-3.5.1.min.js}"></script>
    <script src="/yb_system_js/footfixed.js" th:src="@{/yb_system_js/footfixed.js}"></script>
    <script src="/yb_system_js/md5.js" th:src="@{/yb_system_js/md5.js}"></script>
    <script src="/yb_system_js/layer.js" th:src="@{/yb_system_js/layer.js}"></script>
    <link rel="stylesheet" href="/yb_system_css/layer.css" id="layuicss-layer" th:href="@{/yb_system_css/layer.css}">

<script type="text/javascript">
   
    $(function(){
    	
    	function login() {
       	 var userName=$("#phone").val();
   		 var code=$("#check-code").val();//短信验证码
   		 var pwd=$("#password").val();
   		 var rcode=$("#code").val();//图形验证码
   		 if(isBlank(userName)){
       		 alert("请输入手机号/邮箱");
       		 return ;
       	 }
   		 //如果密码不为空
       	 if(!isBlank(pwd)){
       		 if(pwd.length<6){
       			 alert("请正确输入密码");
           		 return ;
       		 }
       		 if(isBlank(rcode)){
       			 alert("请输入图形验证码");
           		 return ;
       		 }
       		 pwd=MD5(pwd);
       		 code=rcode;// 设置成图形验证码
       	 }
       	 if(isBlank(code)){
       		 alert("请输入验证码");
       		 return ;
       	 }
   		 var data = {};
   		 data["username"]=userName;
   		 data["verifyCode"]=code;
   		 data["password"]=pwd;
   		 $.ajax({
             type : "POST",
             contentType: "application/json;charset=UTF-8",
             data: JSON.stringify(data),
             url : basePath+"login?t="+new Date().getTime(),
             success : function(data) {
   				if (data.success) {
   					layer.msg("登录成功~");
                    forwardIntoUrl(1000);
   					//是不是弹窗登录
   					var isd=$("#isd").val();
   					if(isd==1){//是弹窗登录
   						layerClose(500,true);
   					}else{
   						//重回进入页面
   						forwardIntoUrl(1000);
   					}
   				} else {
   					layer.msg(data.msg);
   				}
   			},  
   		    error: function(XMLHttpRequest, textStatus, errorThrown){  
   		    	alert("链接错误,请联系管理员");
   		    }  
   		});
   	   }

   	   //发送验证码
       function sendCode(obj){
       	 var userName=$("#phone").val();
       	 var rcode=$("#code").val();
       	 if(isBlank(userName)){
       		 alert("请输入手机号/邮箱");
       		 return ;
       	 }
       	 if(isBlank(rcode)){
       		 alert("请输入图形验证码");
       		 return ;
       	 }
       	 var data = {};
   		 data["username"]=userName;
   		 data["verifyCode"]=rcode;
       	 $.post(basePath+"sendCodeLogin",data,function(data){
       		 if (data.success) {
       			 daojishi(90,obj);
       		 }else{ 
       			 layer.msg(data.msg);
       		 }
       	 });
       }
       
       $("#codeImg").click(function(){
      		reCode();
       });
       function reCode(){
      	 	$("#codeImg").attr("src",basePath+"common/vcode?r="+new Date());
       }
       //图形验证码
      // reCode();
       
        //=========================	
    	var phone = new RegExp (/^1\d{10}$/); //手机号码验证
        var youxiang = new RegExp (/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/);  //邮箱验证
        
        $(".num-check-code").hide();
        $(".login-type-change").click(function(){
            var i = $(".login-type-change").attr("res");
            if(i == 0){
                $(this).attr("res","1");
                $(".num-check-code").show();
                $(".login-phone").hide();
                $("#phone").attr('placeholder','请输入手机号/邮箱');
                $(this).text("账号密码登录");
                $(".forget-password").hide();
                $("#password").val("");//清空密码
            }else{
                $(this).attr("res","0");
                $(".num-check-code").hide();
                $(".login-phone").show();
                $("#phone").attr('placeholder','请输入手机号/邮箱');
                $(this).text("手机/邮箱验证码登录");
                $(".forget-password").show();
                $("#password").val("");
            }
        })

        $(".login-btn").click(function(){
            var loginPhone = $("#phone").val();
            var password = $("#password").val();
            var code = $("#code").val();
            var checkcode = $("#check-code").val();
            var i = $(".login-type-change").attr("res");
            if(loginPhone.indexOf('@') < 0 && !phone.test(loginPhone)){
            	layer.msg("请输入正确的手机号/邮箱");
                return false
            }

            if(i == 0 && password == '' || i == 0 && password.length < 6){
                layer.msg("请输入6~18位密码");
                return false
            }

            if(code == ''){
                layer.msg("请输入图中验证码");
                return false
            }

            if(i == 1 && checkcode == ''){
                layer.msg("请获取验证码");
                return false
            }
            
            /* if(!$('#protocol').is(':checked')) {
                layer.msg("请勾选用户协议");
                return false
            } */
			//登录
			login();
        })

        //倒计时
        function daojishi(seconds,obj){
            if (seconds > 1){
                $(obj).css("background-color","#ccc");
                seconds--;
                $(obj).text(seconds+"s后重新发送").attr("disabled", true);//禁用按钮
                // 定时1秒调用一次
                setTimeout(function(){
                    daojishi(seconds,obj);
                },1000);
            }else{
                $(obj).css("background-color","#1482c8");
                $(obj).text("发送验证码").attr("disabled", false);//启用按钮
            }
        }

        //发送验证码点击事件
        $(".send-btn").click(function(){
            var loginPhone=$("#phone").val();
            if(loginPhone.indexOf('@') < 0 && !phone.test(loginPhone)){
            	layer.msg("请输入正确的手机号/邮箱");
                return false
            }
            var code = $("#code").val();
            if(code == ''){
                layer.msg("请输入图中验证码");
                return false
            }
          	//发送验证码
            sendCode(this);
        })
    })


    //图形验证码
    function refresh_kaptcha() {
        var path = basePath + "kaptcha?p=" + Math.random();
        $("#kaptcha").attr("src", path);
    }
</script>
</head>
<body>
<div class="container">
		
		<input id="isd" th:value="${isd}" type="hidden">
		<!-- 是否弹窗隐藏 -->
		<div>
        	<h1>Welcome</h1>
        	<h2>欢迎登录有贝口腔网</h2>
        </div>
        <form class="form" onsubmit="return false;">
            <div class="form-top">
                <a class="active" href="javascript:;">登录</a>
                
                <a th:href="@{/register}">注册</a>
                
            </div>
            
            <div class="form-mian">
                
                <div class="login">
                    <label>
                        <input type="text" placeholder="请输入手机号/邮箱" id="phone" name="phone">
                    </label>
                    <label class="login-phone">
                        <input type="password" minlength="6" placeholder="请输入6~18位密码" id="password" name="name">
                    </label>

                    <div class="img-check-code">
                        <label>
                            <input placeholder="请输入图形验证码" id="code" name="code">
                        </label>
                        <!--<img id="codeImg" alt="有贝口腔网" src="/yb_system/vcode">-->
                        <a href="javascript:refresh_kaptcha();">
                            <img th:src="@{/kaptcha}" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
                        </a>
                    </div>

                    <div class="num-check-code" style="display: none;">
                        <label>
                            <input type="text" placeholder="请输入验证码" id="check-code" name="check-code">
                        </label>
                        <button class="send-btn" type="button">发送验证码</button>
                    </div>

                    <input class="sub-btn login-btn" type="submit" value="登录">
                    <div class="form-bottom">
                        <div class="login-type-change" res="0">手机/邮箱验证码登录</div>
                        <div class="forget-password"><a href="http://www.hasbei.com/findpwd" target="_blank">忘记密码</a></div>
                    </div>
                </div>
            </div>
            <div class="agree-form-item">
                <!-- <input type="checkbox" id="protocol" name="protocol"> -->
                <div>
                    <label for="protocol"><span>登录/注册即表示你同意</span></label>
                    <a href="http://www.hasbei.com/about/agree" target="_blank">《用户协议》</a>
                    <a href="http://www.hasbei.com/about/privacy" target="_blank">《隐私政策》</a>
                </div>
            </div>

            <div class="login-other" style="display:none">
                <div class="login-other-text">第三方账号登录</div>
                <div class="login-other-logo">
                    <a href="javascrip:;" onclick="showPlanFun()"><img src="/yb_system_picture/icon_Wechat.png" alt="有贝口腔网"></a>
                    <a href="javascrip:;" onclick="showPlanFun()"><img src="/yb_system_picture/icon_qq.png" alt="有贝口腔网"></a>
                    <a href="javascrip:;" onclick="showPlanFun()"><img src="/yb_system_picture/icon_Twitter.png" alt="有贝口腔网"></a>
                </div>
            </div>
        </form>
    </div>

</body></html>